<template>
    <div class="heart">
        <div class="loving">

            <div v-for="(item,k) in loving_src" :key="k" class="loving-item lv-item">
                <div class="img-content">
                    <img v-bind:src="k+1<=show_sum ? item.full_src : item.empty_src "  width="80%" alt="">
                </div>

                <div v-if="show_sum==12" class="lv-desc">感恩有你</div>
                <div v-else-if="k+1<=show_sum" class="lv-desc">{{item.desc}}</div>
                <div v-else="k+1>show_sum" class="lv-desc"></div>
            </div>

        </div>

        <div class="card">

            <div class="card_msg">
                <img :src="card_obj.logo_url" alt="">
                <img src="/images/mumu/logo_title.png" width="40" alt="">

                <span class="card_title">全场代金券</span>
                <button class="button" :class=" show_sum==12?'can_get':'not_get' " @click="getWxCard()">领取</button>

            </div>
            <p class="card_des">献满12个爱心即可领取</p>

        </div>
    </div>

</template>

<script>
    export default {

        props:['used','card'],

        data(){
            return {
                loving_src:[
                    {'desc':'hello!','empty_src':'/images/mumu/1_empty.png','full_src':'/images/mumu/1_full.png'},
                    {'desc':'加 油！','empty_src':'/images/mumu/2_empty.png','full_src':'/images/mumu/2_full.png'},
                    {'desc':'棒棒哒','empty_src':'/images/mumu/3_empty.png','full_src':'/images/mumu/3_full.png'},
                    {'desc':'看好你呦','empty_src':'/images/mumu/4_empty.png','full_src':'/images/mumu/4_full.png'},
                    {'desc':'再接再厉！','empty_src':'/images/mumu/5_empty.png','full_src':'/images/mumu/5_full.png'},
                    {'desc':'等风和等你','empty_src':'/images/mumu/6_empty.png','full_src':'/images/mumu/6_full.png'},
                    {'desc':'别放弃','empty_src':'/images/mumu/7_empty.png','full_src':'/images/mumu/7_full.png'},
                    {'desc':'笔心','empty_src':'/images/mumu/8_empty.png','full_src':'/images/mumu/8_full.png'},
                    {'desc':'哎呦！不错','empty_src':'/images/mumu/9_empty.png','full_src':'/images/mumu/9_full.png'},
                    {'desc':'别 急','empty_src':'/images/mumu/10_empty.png','full_src':'/images/mumu/10_full.png'},
                    {'desc':'就差一步','empty_src':'/images/mumu/11_empty.png','full_src':'/images/mumu/11_full.png'},
                    {'desc':'感恩有你','empty_src':'/images/mumu/12_empty.png','full_src':'/images/mumu/12_full.png'}
                ],

                is_loading:true,
            };
        },
        methods:{
            getWxCard:function(){


                var _this = this;
                console.log(this.card_obj.card_id);
                //未满
                if(this.show_sum!=12 || !_this.is_loading) return;

                _this.is_loading = false;

                //开启loading
                this.$emit('loading-status',true);

                var uid = this.card_obj.wxuser_id;

                // 获取卡券列表
                axios.post('/mumu/add_wxcard',{'csrf-token':token.content,'card_id':this.card_obj.card_id})
                    .then(function (response) {
                        //关闭loading
                        _this.$emit('loading-status',false);

                        if(response.data.err_code == 200){
                            _this.is_loading = true;
                            wx.addCard({
                                cardList: response.data.err_msg, // 需要打开的卡券列表
                                success: function (res) {

                                    if(res.errMsg=="addCard:ok"){

                                        var wx_code_my = res.cardList[0].code;

                                        axios.post('/api/card_record/add',{'wxuser_id':uid,
                                            'card_id':_this.card_obj.card_id,
                                            'code':wx_code_my})
                                            .then(function (res) {

                                            }).catch(function (err) {

                                        });

                                        window.location.reload();
                                    }
                                }
                            });
                        }else{
                            _this.is_loading = true;
                            //提示
                            _this.$emit('tips-status',{'t_show':true,'t_msg':response.data.err_msg});

                        }

                        setTimeout(function () {
                            _this.$emit('tips-status',{'t_show':false,'t_msg':response.data.err_msg});
                        },2000)
                    })
                    .catch(function (error) {
                        _this.is_loading = true;
                        //关闭loading
                        _this.$emit('loading-status',false);
                        _this.$emit('tips-status',{'t_show':false,'t_msg':'网络故障请刷新后重试'});
                        console.log(error);
                    });
            }
        },
        computed:{
            show_sum:function(){
                console.log(this.used);
                var show_count = this.used%12;
                if(this.used>=12&& show_count>=0){
                    show_count = 12;
                }

                return show_count;

            },
            card_obj:function () {
                return JSON.parse(this.card);
            },
            chance:function () {
                return parseInt(this.used/12);
            }
        },
    }
</script>

<style>
    .card_msg img:nth-child(2){
        width: 27%;
    }
    .lv-item{
        display: inline-block;
        text-align: center;
        float: left;
        width: 21.5%;
        height: 6rem;
        margin-left: 2.5%;
        margin-bottom: 3%;
    }
    .img-content{
        width: 100%;
        height: 3.2rem;
    }
    .lv-desc{
        display: block;
        font-size: 12px;
        color: #5f5e5e;
        text-align: center;
        margin-top:10px;
    }
    .card{
        border-top:6px solid #5F5E5E;
    }
    .card_des{
        color:#888;
    }
    .card img:nth-child(1){
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
    .loving img{
        width: 50px;
        height: 50px;
    }
</style>
